<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8">
	<meta http-equiv="X-UA-Compatible" content="ie=edge">
	<meta name="renderer" content="webkit">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>表格 | 数据报表</title>
    <link rel="stylesheet" href="../../assets/dest/css/basic_reset.css">
    <link rel="stylesheet" href="../../assets/dest/css/basic_font.css">
    <link rel="stylesheet" href="../../assets/dest/css/data_table.css">
	<link rel="stylesheet" href="../demo-lib/doc.css">
</head>
<body>
	<div class="header">
		<dl>
			<dt>项目：</dt>
			<dd>数据表格</dd>
			<dt>描述：</dt>
			<dd>数据表格</dd>
			<dt>资源：</dt>
			<dd>
				<code>basic_reset.css</code>
				<code>basic_font.css</code>
				<code>data_table.css</code>
			</dd>
		</dl>
	</div>
	<div class="mainbox">
		<h4>一般</h4>
		<table class="c-table">
			<tr>
				<th>标题1</th>
				<th>标题2</th>
				<th>标题3</th>
				<th>标题4</th>
				<th>标题5</th>
			</tr>
			<tr>
				<td>我是单元格1</td>
				<td>我是单元格2</td>
				<td>我是单元格3</td>
				<td>我是单元格4</td>
				<td>我是单元格5</td>
			</tr>
			<tr>
				<td>我是单元格1</td>
				<td>我是单元格2</td>
				<td>我是单元格3</td>
				<td>我是单元格4</td>
				<td>我是单元格5</td>
			</tr>
			<tr>
				<td>我是单元格1</td>
				<td>我是单元格2</td>
				<td>我是单元格3</td>
				<td>我是单元格4</td>
				<td>我是单元格5</td>
			</tr>
			<tr>
				<td>我是单元格1</td>
				<td>我是单元格2</td>
				<td>我是单元格3</td>
				<td>我是单元格4</td>
				<td>我是单元格5</td>
			</tr>
			<tr>
				<td>我是单元格1</td>
				<td>我是单元格2</td>
				<td>我是单元格3</td>
				<td>我是单元格4</td>
				<td>我是单元格5</td>
			</tr>
		</table>

		<h4>结构化呈现</h4>
		<table class="c-table">
			<thead>
				<tr>
					<th>标题1</th>
					<th>标题2</th>
					<th>标题3</th>
					<th>标题4</th>
					<th>标题5</th>
				</tr>
			</thead>
			<tbody>
				<tr>
					<td>我是单元格1</td>
					<td>我是单元格2</td>
					<td>我是单元格3</td>
					<td>我是单元格4</td>
					<td>我是单元格5</td>
				</tr>
				<tr>
					<td>我是单元格1</td>
					<td>我是单元格2</td>
					<td>我是单元格3</td>
					<td>我是单元格4</td>
					<td>我是单元格5</td>
				</tr>
				<tr>
					<td>我是单元格1</td>
					<td>我是单元格2</td>
					<td>我是单元格3</td>
					<td>我是单元格4</td>
					<td>我是单元格5</td>
				</tr>
				<tr>
					<td>我是单元格1</td>
					<td>我是单元格2</td>
					<td>我是单元格3</td>
					<td>我是单元格4</td>
					<td>我是单元格5</td>
				</tr>
				<tr>
					<td>我是单元格1</td>
					<td>我是单元格2</td>
					<td>我是单元格3</td>
					<td>我是单元格4</td>
					<td>我是单元格5</td>
				</tr>
			</tbody>
		</table>

		<h4>鼠标悬停效果</h4>
		<table class="c-table has-hover">
			<tr>
				<th>标题1</th>
				<th>标题2</th>
				<th>标题3</th>
				<th>标题4</th>
				<th>标题5</th>
			</tr>
			<tr>
				<td>我是单元格1</td>
				<td>我是单元格2</td>
				<td>我是单元格3</td>
				<td>我是单元格4</td>
				<td>我是单元格5</td>
			</tr>
			<tr>
				<td>我是单元格1</td>
				<td>我是单元格2</td>
				<td>我是单元格3</td>
				<td>我是单元格4</td>
				<td>我是单元格5</td>
			</tr>
			<tr>
				<td>我是单元格1</td>
				<td>我是单元格2</td>
				<td>我是单元格3</td>
				<td>我是单元格4</td>
				<td>我是单元格5</td>
			</tr>
			<tr>
				<td>我是单元格1</td>
				<td>我是单元格2</td>
				<td>我是单元格3</td>
				<td>我是单元格4</td>
				<td>我是单元格5</td>
			</tr>
			<tr>
				<td>我是单元格1</td>
				<td>我是单元格2</td>
				<td>我是单元格3</td>
				<td>我是单元格4</td>
				<td>我是单元格5</td>
			</tr>
		</table>

		<h4>隔行交替色</h4>
		<table class="c-table has-striped">
			<tr>
				<th>标题1</th>
				<th>标题2</th>
				<th>标题3</th>
				<th>标题4</th>
				<th>标题5</th>
			</tr>
			<tr>
				<td>我是单元格1</td>
				<td>我是单元格2</td>
				<td>我是单元格3</td>
				<td>我是单元格4</td>
				<td>我是单元格5</td>
			</tr>
			<tr>
				<td>我是单元格1</td>
				<td>我是单元格2</td>
				<td>我是单元格3</td>
				<td>我是单元格4</td>
				<td>我是单元格5</td>
			</tr>
			<tr>
				<td>我是单元格1</td>
				<td>我是单元格2</td>
				<td>我是单元格3</td>
				<td>我是单元格4</td>
				<td>我是单元格5</td>
			</tr>
			<tr>
				<td>我是单元格1</td>
				<td>我是单元格2</td>
				<td>我是单元格3</td>
				<td>我是单元格4</td>
				<td>我是单元格5</td>
			</tr>
			<tr>
				<td>我是单元格1</td>
				<td>我是单元格2</td>
				<td>我是单元格3</td>
				<td>我是单元格4</td>
				<td>我是单元格5</td>
			</tr>
		</table>

		<h4>边框</h4>
		<table class="c-table has-bordered">
			<tr>
				<th>标题1</th>
				<th>标题2</th>
				<th>标题3</th>
				<th>标题4</th>
				<th>标题5</th>
			</tr>
			<tr>
				<td>我是单元格1</td>
				<td>我是单元格2</td>
				<td>我是单元格3</td>
				<td>我是单元格4</td>
				<td>我是单元格5</td>
			</tr>
			<tr>
				<td>我是单元格1</td>
				<td>我是单元格2</td>
				<td>我是单元格3</td>
				<td>我是单元格4</td>
				<td>我是单元格5</td>
			</tr>
			<tr>
				<td>我是单元格1</td>
				<td>我是单元格2</td>
				<td>我是单元格3</td>
				<td>我是单元格4</td>
				<td>我是单元格5</td>
			</tr>
			<tr>
				<td>我是单元格1</td>
				<td>我是单元格2</td>
				<td>我是单元格3</td>
				<td>我是单元格4</td>
				<td>我是单元格5</td>
			</tr>
			<tr>
				<td>我是单元格1</td>
				<td>我是单元格2</td>
				<td>我是单元格3</td>
				<td>我是单元格4</td>
				<td>我是单元格5</td>
			</tr>
		</table>
	</div>
</body>
</html>
